<template>
  <div class="departments">
    <el-card>
      <template #header>
        <div>组织结构</div>
      </template>
      <div class="tree">
        <TreeItem :item="topInfo" />
        <hr>
        <!-- /el-tree -->
        <el-tree :data="list" :props="{ children: 'children' }">
          <template v-slot="{ data }">
            <TreeItem :item="data" @getData="getData" />
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 弹框 -->
    <DialogItem :init-list="initList" @getData="getData" />
  </div>
</template>

<script>
import { companyDepartment } from '@/api/departments'
import TreeItem from '@/views/departments/compomemts/tree-item.vue'
import DialogItem from '@/views/departments/compomemts/dialog-item.vue'

export default {
  components: {
    TreeItem,
    DialogItem
  },
  data() {
    return {
      topInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        isTop: true,
        id: ''
      },
      list: [
        // {
        //   name: '深圳市',
        //   child: [
        //     {
        //       name: '宝安区',
        //       child: [{ name: '创维' }]
        //     },
        //     {
        //       name: '南山区'
        //     }
        //   ]
        // }
      ],
      //  原始数据列表
      initList: []
    }
  },
  created() {
    this.getData()
  },
  // mounted() {
  //   console.log('initList111', this.initList)
  // },
  methods: {
    async getData() {
      const res = await companyDepartment()
      this.list = this.changeData(res.data.depts, '')
      this.initList = res.data.depts
      console.log('initList222', this.initList)

      console.log('list', this.list)
      console.log('部门信息,', res)
    },
    changeData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 30px;
  .tree {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
